<template>
    <div>
        <div>
            <span style="position: absolute; margin-left: 25px">ext_json</span>
            <Card class="appProjectTypeUpdate"  style="margin-left:80px; margin-bottom: 15px;">
                <JsonEditor
                        :options="{
                        confirmText: '确认',
                        cancelText: '取消',
                        }"
                        :objData="formValidate.ext_json"
                        v-model="formValidate.ext_json" >
                </JsonEditor>
            </Card>
        </div>
        <div>
            <Form :label-width="80" ref="formValidate" :model="formValidate" :rules="ruleValidate">
                <FormItem label="名称" prop="name">
                    <Input v-model="formValidate.name"></Input>
                </FormItem>
                <FormItem label="备注" prop="remark">
                    <Input v-model="formValidate.remark" type="textarea"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import apiService from '../../api/appProjectType';
    export default {
        components: {},
        props: {
            itemData: {
                type: Object,
                default: {}
            }
        },
        data () {
            return {
                //表单信息
                formValidate: {
                    name: '',
                    remark: '',
                    ext_json: {},
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '请填写项目类型名称', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.operatorRequestHandler(
                            apiService.appProjectTypeUpdate(this.itemData.id, this.formValidate),
                            () => {
                                this.$emit('on-close-customize-update');
                            }
                        )
                    } else {
                        this.$Message.error('请填写相应必填项');
                    }
                })
            },
            handleReset () {
                this.formValidate.name = this.formValidate.remark = '';
                this.formValidate.ext_json = {};
            },
        },
        created() {
            this.formValidate.name = this.itemData.name;
            this.formValidate.remark = this.itemData.remark;
            this.formValidate.ext_json = this.itemData.ext_json.length == 0 ? {} : this.itemData.ext_json;
        }
    }
</script>
<style>
    .pure-form select {
        height: 1.50rem;
    }
    .appProjectTypeUpdate .block_content .key-input,.appProjectListExtJson .block_content .val-input {
        width: 105px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
    }

    .appProjectTypeUpdate:hover{
        width: 600px;
    }

    /*json编辑输入框长度样式修改*/
    .f-input {
        width: 410px;
    }

    /*json编辑下拉伸展按钮左移*/
    .collapse-down {
        position: absolute;
        left: -30px;
    }
</style>
